<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 <!DOCTYPE html>
<html>
<!-- Mirrored from www.gzsxt.cn/theme/hplus/table_basic.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>办公系统 - 基础表格</title>
    <meta name="keywords" content="办公系统">
    <meta name="description" content="办公系统">

    <link rel="shortcut icon" href="favicon.ico"> 
    	<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    	<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/select/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css" />

</head>

<body class="gray-bg">
	<div class="wrapper2 wrapper-content2 animated fadeInRight">
	    <div class="row">
	    		<div class="col-sm-5">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>添加部门</h5>
                    </div>
                    <div class="ibox-content">
                        <form id="deptForm" class="form-horizontal">

                            <div class="form-group">
                                <label class="col-sm-3 control-label">部门名称：</label>

                                <div class="col-sm-8">
                                    <input type="text" name="dname" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">区域：</label>

                                <div class="col-sm-8">
                                    <input type="text" name="local" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-8">
                                    <button class="btn btn-sm btn-white" id="btn" type="button"><i class="fa fa-save"></i> 保存</button>
                                    <button class="btn btn-sm btn-white" type="submit"><i class="fa fa-undo"></i> 重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
	    		<div class="col-sm-7">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>部门列表 <small>点击修改信息将显示在左边表单</small></h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="table-responsive">
                                <table id="deptTable" lay-filter="test"></table>
                                <script type="text/html" id="toolbarDemo">
                                    <div class="layui-btn-container">
                                        <button class="layui-btn layui-btn-sm" lay-event="editDept">编辑</button>
                                        <button class="layui-btn layui-btn-sm" lay-event="deleteDept">删除</button>
                                    </div>
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
	    	</div>
	
	</div>       
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/select/bootstrap-select.min.js"></script>
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="layui/layui.js"></script>

   <script>
	$(document).ready(function() {
		//点击删除
		$('.btndel').click(function () {
		    swal({
		        title: "您确定要删除这条信息吗",
		        text: "删除后将无法恢复，请谨慎操作！",
		        type: "warning",
		        showCancelButton: true,
		        confirmButtonColor: "#DD6B55",
		        confirmButtonText: "删除",
		        closeOnConfirm: false
		    }, function () {//此函数是点击删除执行的函数
		    		//这里写ajax代码
		    		// 以下是成功的提示框，请在ajax回调函数中执行
			    swal("删除成功！", "您已经永久删除了这条信息。", "success");
		    });
		});
		//加载部门列表
        showDeptList();
		//增加部门
        $("#btn").click(function(){
            //发送异步请求
            $.ajax({
                url:"${pageContext.request.contextPath}/dept/addDept",
                type:"post",
                data:$("#deptForm").serialize(),
                dataType:"json",
                cache:false,
                success:function(rs){
                    if(rs.status==200){
                        swal(rs.msg);
                        window.location="${pageContext.request.contextPath}/pages/list-dept.jsp";
                    }else if(rs.status==400){
                        swal(rs.msg);
                    }
                }
            });
        });
	});
	function showDeptList(){

	    //初始化一个table
        layui.use('table',function(){
            var table = layui.table;
            table.render({
                 elem: '#deptTable'
                ,height: 400
                ,even:true
                ,url: '${pageContext.request.contextPath}/dept/getDepts' //数据接口
                ,toolbar:"#toolbarDemo"
                ,page: true //开启分页
                ,limits:[5,10,15,20]
                ,cols:[[
                    {type:'checkbox',fixed: 'left'},
                    {field:"deptno",title: '编号', width:80, sort: true, fixed: 'left'},
                    {field:"dname",title: '部门名称', width:150},
                    {field:"local",title: '区域', width:100}
                ]]
            });
            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'editDept':
                        var data = checkStatus.data;
                        alert(JSON.stringify(data));
                        if(data.length!=1){
                            swal("只能选择一条记录进行修改");
                        }else{
                            window.location="${pageContext.request.contextPath}/pages/update-dept.jsp?deptno="+data[0].deptno;
                        }
                        break;
                    case 'deleteDept':
                        var data = checkStatus.data;
                        var deptnos=new Array();
                        if(data.length==0){
                            swal("至少选择一条记录进行删除");
                            return ;
                        }else{
                            for(var i=0;i<data.length;i++){
                                deptnos.push(data[i].deptno);
                            }
                        }
                        swal({
                            title: "您确定要删除这条信息吗",
                            text: "删除后将无法恢复，请谨慎操作！",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "删除",
                            closeOnConfirm: false
                        }, function () {//此函数是点击删除执行的函数
                           $.ajax({
                               url:"${pageContext.request.contextPath}/dept/deleteDept",
                               type:"post",
                               data:{"deptnos":deptnos},
                               dataType:"json",
                               cache:false,
                               success:function(rs){
                                   if(rs.status==200){
                                       swal("删除成功！", "您已经永久删除了这条信息。", "success");
                                       showDeptList();
                                   }else if(rs.status==400){
                                       swal(rs.msg);
                                   }
                               }
                           });

                        });
                        break;
                };
            });
        });

    }
    </script>  
</body>


</html>
    
